<template>
  <div>
    <a-spin tip="加载中" :spinning="dataLoading">
      <div class="collection-container">
        <router-link v-for="item in page.list" :key="item.id" :to="'/info/'+item.blog.blogId" class="recommond-container">
          <div class="recommond-title">
            {{ item.blog.blogTitle }}
          </div>
          <div class="recommond-type">
            分类: <a-tag color="green">{{ item.blog.typeName }}</a-tag>
          </div>
          <div class="recommond-bottom">
            <div class="recommond-time">
              {{ item.blog.createdTime }}
            </div>
            <div class="recommond-like">
              <a-icon type="eye" /> {{ item.blog.blogRead }}
              <a-icon type="heart" /> {{ item.blog.blogCollection }}
              <a-icon type="like" /> {{ item.blog.blogGoods }}
              <a-icon type="message" /> {{ item.blog.blogComment }}
            </div>
          </div>
        </router-link>
        <a-divider />
        <a-pagination show-quick-jumper :default-current="0" :total="page.countTotal" :page-size.sync="page.pageSize" :show-total="total => `总共 ${page.countTotal} 条`" @change="onChange" />
      </div>
    </a-spin>
  </div>
</template>

<script>
import userApi from '@/api/myuser'
export default {
  name: 'Collection',
  data() {
    return {
      page: {
        currentPage: 0, // 当前页
        pageSize: 3, // 页面大小
        pageTotal: 0, // 总页数
        countTotal: 0, // 总条数
        sortColumn: '', // 排序字段
        sortMethod: 'asc', // 排序方法
        list: [], // 数据
        params: {} // 条件查询参数
      },
      dataLoading: false,
      typeName: ''
    }
  },
  created() {
    this.getUserCollections()
  },
  methods: {
    onChange(e) {
      this.page.currentPage = e
      this.getUserCollections()
    },
    // 拿到用户的收藏
    getUserCollections() {
      this.dataLoading = true
      userApi.getUserCollections(this.page).then(res => {
        if (res.code === 200) {
          this.page = res.data
          this.dataLoading = false
        } else {
          this.$message.error(res.msg)
          this.dataLoading = false
        }
      }).catch(() => {
        this.dataLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .collection-container{
    display: flex;
    flex-flow: column nowrap;
    .recommond-container{
      display: flex;
      flex-flow:column nowrap;
      /*标题*/
      .recommond-title{
        font-size: 16px;
        color: #717682;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 43px !important;
      }
      .recommond-type{
        color: #a2a2a2;
        margin-top: 12px;
        margin-bottom: 13px;
      }
      .recommond-bottom{
        display: flex;
        justify-content: space-between;
        color: #c8c8c8;
        line-height: 20px;
        .recommond-time{

        }
        .recommond-like{
          width: 100px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }

</style>
